<template>
    <div>
        <div class="title">热销推荐</div>
        <ul>
            <!-- 热销推荐页面跳转 -->
            <!-- <router-link to='/detail'> -->
                <!-- border-bottom底部添加一边框像素 -->
                <!-- 
                    1.把li替换成router-link标签，并设置tag='li'就行了 
                    2.to加上冒号设置成动态绑定
                -->
                <router-link 
                    :to="'/detail/' + item.id"
                    tag="li"
                    class="item border-bottom" 
                    v-for='item of list' 
                    :key='item.id'>

                    <img class="item-img" :src="item.imgUrl" alt="">

                    <div class="item-info">
                        <p class="item-title">{{item.title}}</p>
                        <p class="item-desc">{{item.desc}}</p>
                        <Button class="item-btn">查看详情</Button>
                    </div>
                </router-link>
        </ul>
    </div>
</template>

<script>
export default{
    name: 'HomeRecommend',
    props: {
        list: Array
    }
}
</script>

<style lang='stylus' scoped>
    @import '~styles/mixins.styl'
    .title
        margin-top: .2rem
        line-height: .8rem
        background: #eeeeee
        text-indent: .2rem
    .item
        overflow: hidden
        display: flex
        height 1.8rem
        .item-img
            width 1.6rem
            height 1.6rem
            padding .1rem
            border-radius .16rem
        .item-info
            flex: 1
            padding .1rem
            min-width 0
            .item-title
                line-height .54rem
                font-size .32rem
                ellipsis()
            .item-desc
                line-height .4rem
                color #ccc
                font-size .18rem
                ellipsis()
            .item-btn
                line-height .44rem
                margin-top .2rem
                background #ff9300
                padding 0 .2rem
                border-radius .06rem
                color #fff
                font-size .1rem
</style>